<extend name="Public:main" />

<block name="style">
<style>
.main{
  background-color:#fafafa;
}
</style>
</block>

<block name="container">
<div class="form-inline">
	<div class="btn-inline">
		<div id="btnGroup" class="btn-group btn-group-sm">
			<button id="vistor" class="btn btn-success">访客类型</button>
			<button id="link" class="btn btn-success">受访页面</button>
			<button id="system" class="btn btn-success">操作系统</button>
			<button id="browser" class="btn btn-success">客户端</button>
		</div>
		<a class="btn btn-sm btn-primary" href="__APP__/Vistor/index">返回表格</a>
		<div id="date">
			<div class="form-group">
				<label for="date1">时间区间</label>
				<input type="text" id="date1" class="form-control input-sm" />
			</div>
			<div class="form-group">
				<label for="date2">至</label>
				<input type="text" id="date2" class="form-control input-sm" />
			</div>
		</div>
	</div>
	
</div>
<hr />
<div id="vistorChart"></div>
</block>

<block name="script">
<load href="https://cdn.bootcss.com/echarts/4.1.0/echarts.common.min.js" />

<script>
(function(){
	"use strict";

	var init = function(){
		initPage();
		bindEvent();
		$("#vistor").click();
	},
	initPage = function(){
		 $("#vistorChart").css("height", "500px");
		 $("#date").css("float", "right");
		 laydate.render({
			elem: '#date1',
			type: 'date',
			theme: 'wugn',
			calendar: true,
			today: true,
			value: new Date((new Date().getTime() - 7*24*3600*1000))
		});
		laydate.render({
			elem: '#date2',
			type: 'date',
			theme: 'wugn',
			calendar: true,
			today: true,
			value: new Date()
		});
	},
	bindEvent = function(){
		$("#btnGroup button").click(function(){
			$("#btnGroup button").removeClass("active");
			$(this).addClass("active");
		});
		$("#vistor").click(function(){
			$("#date").hide();
			loadChart('vistor');
		});
		$("#link").click(function(){
			$("#date").show();
			loadChart('link');
		});
		$("#system").click(function(){
			$("#date").show();
			loadChart('system');
		});
		$("#browser").click(function(){
			$("#date").show();
			loadChart('browser');
		});
	},
	loadChart = function(type){
		$('#vistorChart').removeAttr('_echarts_instance_').empty();
		var myChart = echarts.init($("#vistorChart")[0]);
		myChart.showLoading();
		$.ajax({
			url: '__APP__/Vistor/loadChart',
			data: {
				type: type,
				date1: $("#date1").val(),
				date2: $("#date2").val()
			},
			type: 'POST',
			cache: false,
			dataType: 'JSON',
			beforeSend: function(){},
			complete: function(){}
		}).done(function(data){
			myChart.hideLoading();
			myChart.setOption(data);
		}).fail(function(){
				swal({
				type: 'error',
				title: '加载失败',
				allowOutsideClick: false,
				allowEnterKey: false,
				confirmButtonText: '确认',
				animation: false,
				customClass: 'animated wobble'
			});
		});
	};

	$(function(){
		init();
	});
})();
</script>
</block>